<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<video autoplay id="player" muted></video>
<script>

  function handleChange(event) {
    /* handle all image input change */
    if (event.target.id.includes('img')) {
      var field = event.target.id;
      var preview = document.getElementById(field + '_preview');
      var file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function(readerEvent) {
        var image = new Image();
        image.onload = function(imageEvent) {
          var canvas = document.createElement('canvas');
          var max_size = 800; /* max size */
          var width = image.width, height = image.height;
          /* alter image size */
          if (width > height) {
            if (width > max_size) {
              height *= max_size / width;
              width = max_size;
            }
          } else {
            if (height > max_size) {
              width *= max_size / height;
              height = max_size;
            }
          }
          /* draw image on canvas */
          canvas.width = width;
          canvas.height = height;
          canvas.getContext('2d').drawImage(image, 0, 0, width, height);
          var dataUrl = canvas.toDataURL('image/jpeg');
          /* canvas to blob */
          canvas.toBlob(function(blob){
            this.setState({[field]:blob});
            var reader1 = new FileReader();
            reader1.addEventListener("load",function(){
              preview.src = dataUrl;
            }, false);
            reader1.readAsDataURL(blob);
          });
        }
        image.src = readerEvent.target.result;
      }
      reader.readAsDataURL(file);
    }
  }
</script>
</body>
</html>
